import React from "react";
// import { createHashHistory, createBrowserHistory } from "history";
import { createHashHistory, createBrowserHistory } from "./my-history";

import {
  Router,
  Routes,
  Route,
  useSearchParams,
  useNavigate,
  Outlet,
  useLocation,
  useParams,
  useOutlet,
} from "./my-react-router";
export {
  Routes,
  Route,
  useSearchParams,
  Outlet,
  useNavigate,
  useLocation,
  useParams,
  useOutlet,
};

export function HashRouter({ children }) {
  const historyRef = React.useRef();
  if (historyRef.current == null) {
    historyRef.current = createHashHistory();
  }

  const history = historyRef.current;
  const [state, setState] = React.useState({
    action: history.action,
    location: history.location,
  });

  // 监听路径变化，就执行 setState
  React.useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      children={children}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
}

export function BrowserRouter({ children }) {
  const historyRef = React.useRef();
  if (historyRef.current == null) {
    historyRef.current = createBrowserHistory();
  }
  const history = historyRef.current;
  const [state, setState] = React.useState({
    action: history.action,
    location: history.location,
  });

  // 监听路径变化，就执行 setState
  React.useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      children={children}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
}

export function Link({ to, children, ...rest }) {
  const navigate = useNavigate();

  const handleClick = (ev) => {
    ev.preventDefault();
    navigate(to);
  };

  return (
    <a href={to} onClick={handleClick} {...rest}>
      {children}
    </a>
  );
}

/**
 *
 * @param {*} className 类名，可以是字符串，也可以是一个函数，函数的参数是 isActive
 * @param {*} end 是否结束
 * @param {*} style 行内样式 可以是的字符串，也可以是一个函数，函数的参数是 isActive
 * @param {*} to 点击导航跳转的路径
 * @param {*} children 子组件
 */
export function NavLink({
  className: classNameProp = "",
  end = false,
  style: styleProp = {},
  to,
  children,
  ...rest
}) {
  const location = useLocation();
  const path = { pathname: to };
  const locationPathname = location.pathname; //当前的路径
  const toPathname = path.pathname; //当前导航想要跳转的路径
  // 如果路径一样，或者不结束，并且当前的路径是以 to 开头的，并且下一个字符 /，也就是路径路径分隔符
  const isActive =
    locationPathname === toPathname ||
    (!end &&
      locationPathname.startsWith(toPathname) &&
      locationPathname.charAt(toPathname.length) === "/");
  let className;
  if (typeof classNameProp === "function") {
    className = classNameProp({
      isActive,
    });
  }
  let style;
  if (typeof styleProp === "function") {
    style = styleProp({
      isActive,
    });
  }

  return (
    <Link {...rest} to={to} className={className} style={style}>
      {children}
    </Link>
  );
}

export function Navigate({ to }) {
  const navigate = useNavigate();
  React.useLayoutEffect(() => {
    navigate(to);
  });
  return null;
}
